<template>
  <div class="layout-padding-auto layout-padding-view">
    <!--查询表单-->
    <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">

      <el-form-item :label="$t('storageInfo.materialCode')" prop="materialCode">
        <el-input v-model="state.queryForm.materialCode" :placeholder="$t('storageInfo.enterMaterialCode')" />
      </el-form-item>

      <el-form-item :label="$t('storageInfo.materialName')" prop="materialName">
        <el-input v-model="state.queryForm.materialName" :placeholder="$t('storageInfo.enterMaterialName')" />
      </el-form-item>

      <el-form-item :label="$t('storageInfo.materialSpecification')" prop="spec">
        <el-input v-model="state.queryForm.spec" :placeholder="$t('storageInfo.enterMaterialSpecification')" />
      </el-form-item>
      <el-form-item :label="$t('storageInfo.barcode')" prop="barcode">
        <el-input v-model="state.queryForm.barcode" :placeholder="$t('storageInfo.enterBarcode')" />
      </el-form-item>
      <el-form-item :label="$t('storageInfo.warehouse')" prop="warehouseCode">
        <div style="display: inline-block; margin-left: 20px">
          <el-select v-model="state.queryForm.warehouseCode" multiple collapse-tags
            :placeholder="$t('storageInfo.selectWarehouse')" style="width: 150px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
      </el-form-item>
      <el-form-item :label="$t('storageInfo.process')" prop="processCode">
        <div style="display: inline-block; margin-left: 20px">
          <el-select v-model="state.queryForm.processCode" multiple collapse-tags
            :placeholder="$t('storageInfo.selectProcess')" style="width: 150px">
            <el-option v-for="item in optionsP" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" type="primary"  @click="getDataList">{{ $t('storageInfo.query') }}</el-button>
        <el-button icon="refresh"  @click="resetQuery">{{ $t('storageInfo.reset') }}</el-button>
        <el-button plain class="ml10" icon="Download" type="success" @click="exportxlsx">
          {{ $t('common.exportBtn') }}
        </el-button>
      </el-form-item>
    </el-form>
    <!--查询结果的列表-->
    <el-table :data="state.dataList" highlight-current-row v-loading="state.loading" border :summary-method="getSummaries"
      show-summary style="width: 100%;height: 100%" :cell-style="tableStyle.cellStyle" stripe
      :header-cell-style="tableStyle.headerCellStyle">
      <el-table-column fixed type="index" label="#" width="60" />
      <el-table-column fixed prop="barcode" :label="$t('storageInfo.barcode')" width="250" />
      <el-table-column prop="warehouseCode" :label="$t('storageInfo.warehouseCode')" width="100" />
      <el-table-column prop="warehouseName" :label="$t('storageInfo.warehouseName')" width="120" />
      <el-table-column prop="locationCode" :label="$t('storageInfo.locationCode')" width="170" />
      <el-table-column prop="stockBatch" :label="$t('storageInfo.stockBatch')" width="100" />
      <el-table-column prop="initQty" :label="$t('storageInfo.initQty')" width="100">
        <template #default="scope">
          <!--根据不同的状态选择不同的颜色的tag-->
          <el-tag size="large" :type="'warning'">
            {{ scope.row.initQty }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="currentQty" :label="$t('storageInfo.currentQty')" width="100">
        <template #default="scope">
          <!--根据不同的状态选择不同的颜色的tag-->
          <el-tag size="large" :type="'success'">
            {{ scope.row.currentQty }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="barcodeStatus" :label="$t('storageInfo.barcodeStatus')" width="110">
        <template #default="scope">
          <!--根据不同的状态选择不同的颜色的tag-->
          <el-tag size="large" :type="''">
            {{ scope.row.barcodeStatus === 'inStock' ? $t('storageInfo.inStock') : $t('storageInfo.outStock') }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="materialCode" :label="$t('storageInfo.materialCode')" width="170" />
      <el-table-column prop="materialName" :label="$t('storageInfo.materialName')" width="180" />
      <el-table-column prop="spec" :label="$t('storageInfo.materialSpecification')" width="300" />
      <el-table-column prop="facialMaskSpec" :label="$t('storageInfo.facialMaskSpec')" width="180" />
      <el-table-column prop="inventoryCategory" :label="$t('storageInfo.inventoryCategory')" width="180" />
      <el-table-column prop="processCode" :label="$t('storageInfo.processCode')" width="180" />
      <el-table-column prop="processName" :label="$t('storageInfo.processName')" width="180" />
      <el-table-column prop="manualNumber" :label="$t('storageInfo.manualNumber')" width="100" />
      <el-table-column prop="productionTime" :label="$t('storageInfo.productionTime')" width="180" />
      <el-table-column prop="embossing" :label="$t('storageInfo.embossing')" width="180" />
      <el-table-column prop="filmDegrees" :label="$t('storageInfo.filmDegrees')" width="180" />
      <el-table-column prop="oilFilmType" :label="$t('storageInfo.oilFilmType')" width="180" />
      <el-table-column prop="chamfering" :label="$t('storageInfo.chamfering')" width="180" />
      <el-table-column prop="onePunshing" :label="$t('storageInfo.onePunshing')" width="180" />
      <el-table-column prop="marking" :label="$t('storageInfo.marking')" width="180" />
      <el-table-column prop="hook" :label="$t('storageInfo.hook')" width="180" />
      <el-table-column prop="peFilmThickness" :label="$t('storageInfo.peFilmThickness')" width="180" />
      <el-table-column prop="peFilmDensity" :label="$t('storageInfo.peFilmDensity')" width="180" />
      <el-table-column prop="peFilmColor" :label="$t('storageInfo.peFilmColor')" width="180" />
      <el-table-column prop="peFilmShading" :label="$t('storageInfo.peFilmShading')" width="180" />
      <el-table-column prop="peFilmLogo" :label="$t('storageInfo.peFilmLogo')" width="180" />
      <el-table-column prop="isPack" :label="$t('storageInfo.isPack')" width="100">
        <template #default="scope">
          <!--根据不同的状态选择不同的颜色的tag-->
          <el-tag size="large" :type="scope.row.isPack === 'Y' ? 'success' : 'danger'">
            {{ scope.row.isPack }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="isWarp" :label="$t('storageInfo.isWarp')" width="100">
        <template #default="scope">
          <!--根据不同的状态选择不同的颜色的tag-->
          <el-tag size="large" :type="scope.row.isWarp === 'Y' ? 'success' : 'danger'">
            {{ scope.row.isWarp }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
    <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { BasicTableProps, useTable } from "/@/hooks/table";
import { useMessage, useMessageBox } from "/@/hooks/message";
import { getInventoryDetails, getProcessList, getWarehousList } from "/@/api/platform/report/storageInfo"
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
// 搜索变量
const queryRef = ref()
const selectValue = ref([])
const options = ref([])
const optionsP = ref([])

onMounted(() => {
  getWarehousList().then(res => {
    options.value = res.data
  })
})
onMounted(() => {
  getProcessList().then(res => {
    optionsP.value = res.data
  })
})

const getSummaries = (param) => {
  const { columns, data } = param
  const sums: (string | VNode)[] = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = h('div', { style: { textDecoration: 'underline', textAlign: 'center' } }, [
        'Sum',
      ])
      return
    }
    //只显示这两个字段的和
    if (column.property != 'initQty' && column.property != 'currentQty') return;
    if (index == 3) return;
    const values = data.map((item) => Number(item[column.property]))
    console.log(values)
    if (!values.every((value) => Number.isNaN(value))) {
      sums[index] = h('div', { style: { textAlign: 'center' } }, [
        `${values.reduce((prev, curr) => {
          const value = Number(curr)
          if (!Number.isNaN(value)) {
            return Number((prev + curr).toFixed(4))
          } else {
            return Number(prev.toFixed(4))
          }
        }, 0)}`,
      ])
    }
  })

  return sums
}

const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {},
  pageList: getInventoryDetails
})

const {
  getDataList,
  currentChangeHandle,
  sizeChangeHandle,
  sortChangeHandle,
  downBlobFile,
  tableStyle
} = useTable(state)

// 清空搜索条件
const resetQuery = () => {
  // 清空搜索条件
  queryRef.value?.resetFields()
  // 清空多选
  getDataList(false)
}
const exportxlsx = () => {
  downBlobFile('/report/storageInfo/ExportInventoryDetails', {
    "materialCode": state.queryForm.materialCode,
    "materialName": state.queryForm.materialName,
    "spec": state.queryForm.materialSpec,
    "barcode": state.queryForm.barcode,
    "warehouseCode": state.queryForm.warehouseCode,
    "processCode": state.queryForm.processCode
  }, 'storageInfoDetail' + getNowFormatDate() + '.xlsx');
}
function getNowFormatDate() {
  var date = new Date();
  // 获取年份
  const year = date.getFullYear();

  // 获取月份，注意JavaScript中的月份是从0开始的，因此需要+1
  const month = String(date.getMonth() + 1).padStart(2, '0');

  // 获取日期
  const day = String(date.getDate()).padStart(2, '0');

  // 拼接成 年月日时分秒 格式的字符串
  var currentdate = year + month + day
    + date.getHours() + date.getMinutes()
    + date.getSeconds();
  return currentdate;
}
</script>